<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>师资详情</title>
		<!-- import Vue before Element -->
		<script src="../static/js/vue.js"></script>
		<!-- import JavaScript -->
		<script src="../static/js/element.js"></script>
		<script src="../static/js/axios.js"></script>
		<link rel="stylesheet" href="../static/elementui/theme-chalk/index.css">
		<style type="text/css">
			.head {
				width: 90%;
				margin: auto;
				height: 80px;
				line-height: 80px;
			}
			.body {
				/* height: 400px; */
				width: 90%;
				margin: auto;
				border-radius: 4px;
				box-shadow: 0 6px 10px rgba(0, 0, 0, .24), 0 8px 8px rgba(0, 0, 0, .12)
			}
			.title {
				height: 40px;
				line-height: 40px;
				border-bottom: #000000 solid 1px;
				padding-left: 20px;
				box-sizing: border-box;
			}
			.avatar-uploader .el-upload {
			    border: 1px dashed #d9d9d9;
			    border-radius: 6px;
			    cursor: pointer;
			    position: relative;
			    overflow: hidden;
			  }
			  .avatar-uploader .el-upload:hover {
			    border-color: #409EFF;
			  }
			  .avatar-uploader-icon {
			    font-size: 28px;
			    color: #8c939d;
			    width: 178px;
			    height: 178px;
			    line-height: 178px;
			    text-align: center;
			  }
			  .avatar {
			    width: 178px;
			    height: 178px;
			    display: block;
			  }
			  .form{
				  margin-left: 50px;
			  }
		</style>
	</head>
	<body>
		<div id="element">
			<div class="head">
				<span style="font-family: PingFang SC;font-size: 20px;">
					师资管理
				</span>
				<i class="el-icon-user-solid"></i>
				<span style="font-family: PingFang SC;font-size: 18px;">
					- 新增师资
				</span>
			</div>
			<div class="body">
				<div class="title">
					<span style="font-family: PingFang SC;font-size:16px;">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新增
					</span>
				</div>
				<hr >
				<div class="form">
					<table border="0" cellspacing="0" cellpadding="10">
						<tr>
							<td>项目：</td>
							<td>
								<el-select v-model="project" placeholder="请选择">
									<el-option
											v-for="item in projectOptions"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									</el-option>
								</el-select>
							</td>
						</tr>
						<tr>
							<td>姓名：</td>
							<td><el-input v-model="teacherName" placeholder="请输入老师名称"></el-input></td>
						</tr>
						<tr>
							<td>图片：</td>
							<td>
								<el-upload
								  class="avatar-uploader"
								  action="uploadImg"
								  :show-file-list="false"
								  :limit="1"
								  :on-success="handleAvatarSuccess"
								  :before-upload="beforeAvatarUpload">
								  <img v-if="imageUrl" :src="imageUrl" class="avatar">
								  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</td>
						</tr>
						<tr>
							<td>介绍：</td>
							<td>
							<el-input
									type="textarea"
									:rows="5"
									placeholder="请输入内容"
									v-model="textarea">
							</el-input>
							</textarea></td>
						</tr>
						<tr>
							<td>公开课：</td>
							<td><el-input v-model="video" placeholder="请输入链接"></el-input></td>
						</tr>
						<tr>
							<td><el-button type="primary" @click="add">创建</el-button></td>
							<td><el-button type="success" @click="back">取消</el-button></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		parent.layui.admin.events.closeOtherTabs()
		let element = new Vue({
			el:"#element",
			data:{
				imageUrl:"",
				teacherName:"",
				project:"",
				textarea:"",
				projectOptions:[],
				video:"",
			},
			methods:{
				 handleAvatarSuccess(res, file) {
				        this.imageUrl = URL.createObjectURL(file.raw);
				      },
				 beforeAvatarUpload(file) {
						  const isJPG = file.type === 'image/jpeg';
						  const isLt2M = file.size / 1024 / 1024 < 2;
				  
						  if (!isJPG) {
							this.$message.error('上传头像图片只能是 JPG 格式!');
						  }
						  if (!isLt2M) {
							this.$message.error('上传头像图片大小不能超过 2MB!');
						  }
						  return isJPG && isLt2M;
				 },
				add:function (){
				 	let projectId = this.project
					let name = this.teacherName
					let descr = this.textarea
					let video = this.video
					if(projectId != null && projectId != '' && name != null &&
							name != ''){
						let teacher = {
							projectBean:{
								id:projectId,
							},
							teacherName:name,
							descr:descr
						}
						axios.post("add",teacher)
								.then(function (){
									element.$notify({
										title: '成功',
										message: '新增成功',
										type: 'success'
									});
								})
					}else {
						this.$message({
							message: '请选择项目并键入名称',
							type: 'warning',
							showClose: true,
						});
					}
				},
				back:function (){
					parent.layui.index.openTabsPage("teacher/teacher", "师资列表")
				},
			},
		})
		axios.get("getProject")
				.then(function (res) {
					let projs = res.data
					for(let i=0; i<projs.length; i++){
						let proj = {
							value:i+1,
							label:projs[i]
						}
						element.$data.projectOptions.push(proj)
					}
				})
	</script>
</html>
